<template>
  <div class="center">
    <div class="box" style="grid-column: 2 / span 1;grid-row: 1 / span 1;">
      <p>订单总金额</p>
      <p style="font-size: 26px;">{{ supplierInfo?.totalMoney }} ￥</p>
    </div>
    <div class="box" style="grid-column: 1 / span 1;grid-row: 2 / span 1;">
      <p>商品类目</p>
      <p style="font-size: 26px;">{{ supplierInfo?.categoryCount }}</p>
    </div>
    <div class="box" style="grid-column: 3 / span 1;grid-row: 2 / span 1;">
      <p>销售门店</p>
      <p style="font-size: 26px;">{{ supplierInfo?.storeCount }}</p>
    </div>
  </div>
</template>

<script setup lang="ts" name="CenterComponent">
import { reqSupplierInfo } from '@/apis/supply'
import type { SupplierInfo, SupplierInfoResponseData } from '@/apis/supply/type'
import { onMounted, ref } from 'vue';
let supplierInfo = ref<SupplierInfo>();
onMounted(() => {
  getSupplierInfo();
})
async function getSupplierInfo() {
  const res: SupplierInfoResponseData = await reqSupplierInfo();
  if (res.code === 200) {
    supplierInfo.value = res.data;
    console.log(supplierInfo.value,'供应商基础信息');
  }
}
defineExpose({ supplierInfo })
</script>

<style scoped lang="scss">
.center {
  padding: 80px 0;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(120px, 33.33%);
  .box {
    width: 100%;
    background-color: #0b498a;
    border-radius: 5px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border: 1px solid #0197d9;
    font-size: 18px;
  }
}
</style>